<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.css"/>
  <style>
    .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
    html,body{
      background-color: transparent;
    }
    .arrow-02 {
      width: 0.12rem;
      height: 0.12rem;
      background-size: 0.12rem 0.12rem;
      background-image: url("../image/my/arrow02.png");
      margin-right: 0.20rem;
    }
    input::-webkit-input-placeholder {
      text-align: end;
      color: #C4C5CE;
    }
    input {
      height: 0.50rem;
      width: 2.90rem;
      margin-right: 0.42rem;
      text-align: end;
      color: #26344C;
    }
  </style>
</head>
<body>
<div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
  <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;">
    <p style="font-size: 0.14rem; color: #83889A;">姓氏</p>
    <input id="family-name" placeholder="请输入您的姓氏">
  </div>
</div>
<div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
  <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeSex()">
    <p style="font-size: 0.14rem; color: #83889A;">性别</p>
    <div class="flex" style="align-items: center;">
      <p id="sex" style="font-size: 0.14rem; color: #C4C5CE; margin-right: 0.10rem;">必填</p>
      <div class="arrow-02"></div>
    </div>
  </div>
</div>
<div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
  <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeNum()">
    <p style="font-size: 0.14rem; color: #83889A;">字数</p>
    <div class="flex" style="align-items: center;">
      <p id="num" style="font-size: 0.14rem; color: #C4C5CE; margin-right: 0.10rem;">必填</p>
      <div class="arrow-02"></div>
    </div>
  </div>
</div>
<div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
  <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeBirth()">
    <p style="font-size: 0.14rem; color: #83889A;">出生时间</p>
    <div class="flex" style="align-items: center;">
      <p id="birth" style="font-size: 0.14rem; color: #C4C5CE; margin-right: 0.10rem;">必填</p>
      <div class="arrow-02"></div>
    </div>
  </div>
</div>
<div class="flex" style="justify-content: center; margin-top: 1.00rem">
  <div style="width: 2.97rem; height: 0.45rem; background-color: #A0522C; border-radius: 0.28rem; line-height: 0.45rem; font-size: 0.15rem; text-align: center; color: white;"  tapmode onclick="getFortuneTelling()">开始起名</div>
</div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript">
  var familyNameEl, sexEl, numEl, birthEl;
  var userInfo = [];
  var locked = 1, UIDatePicker;
  apiready = function () {
    familyNameEl = $api.byId('family-name');
    sexEl = $api.byId('sex');
    numEl = $api.byId('num');
    birthEl = $api.byId('birth');

    UIDatePicker = api.require('UIDatePicker');
  }

  function changeSex() {
    if (locked == 1) {
      familyNameEl.blur();
      api.actionSheet({
        cancelTitle: '取消',
        buttons: ['男', '女']
      }, function(ret, err) {
        var index = ret.buttonIndex;
        if (index == 1) {
          $api.text(sexEl, "男");
          userInfo['sex'] = 0;
          $api.css(sexEl,'color: #26344C;');
        } else if (index == 2) {
          $api.text(sexEl, "女");
          userInfo['sex'] = 1;
          $api.css(sexEl,'color: #26344C;');
        }
      });
    }
  }

  function changeNum() {
    if (locked == 1) {
      familyNameEl.blur();
      api.actionSheet({
        cancelTitle: '取消',
        buttons: ['不限', '两字', '三字']
      }, function(ret, err) {
        var index = ret.buttonIndex;
        if (index == 1) {
          $api.text(numEl, "不限");
          userInfo['num'] = 0;
          $api.css(numEl,'color: #26344C;');
        } else if (index == 2) {
          $api.text(numEl, "两字");
          userInfo['num'] = 2;
          $api.css(numEl,'color: #26344C;');
        } else if (index == 3) {
          $api.text(numEl, "三字");
          userInfo['num'] = 3;
          $api.css(numEl,'color: #26344C;');
        }
      });
    }
  }

  function changeBirth() {
    if (locked == 1) {
      familyNameEl.blur();
      // givenNameEl.blur();
      var date = fun_date(0), theDate;
      UIDatePicker.open({
        type: 'dateHourMinute',
        // date: theDate + " 00:00:00",
        rowHeight:40,
        maxDate:date['date'] + " 24:59:59",
        title: '选择日期',
        styles: {
          bg: 'rgba(0,0,0,0)',
          headerViewBackgroundColor:'rgba(0,0,0,0)',
          lineBackgroundColor: 'rgba(223,223,228,0.3)',
          item:{
            normal: '#666666',
            normalFont: 16,
            selected: '#24253D',
            selectedFont: 20,
            cancelBtn:{
              cancelButtonTextColor: '#A0522C',
              cancelButtonText: '取消' ,
              cancelButtonFont:16
            },
            confirmBtn:{
              confirmButtonTextColor: '#A0522C',
              confirmButtonText: '确认' ,
              confirmButtonFont:16
            },
          }
        },
      }, function(ret, err) {
        if (ret) {
          // alert(JSON.stringify(ret));
          if (ret.eventType == "submit") {
            var year = ret.year;
            userInfo['birth_year'] = year;

            var month = ret.month;
            userInfo['birth_month'] = month;
            if (month<10) {
              month = "0" + month;
            }
            var day = ret.day;
            userInfo['birth_day'] = day;
            if (day<10) {
              day = "0" + day;
            }
            var hour = ret.hour;
            userInfo['birth_hour'] = hour;
            if (hour<10) {
              hour = "0" + hour;
            }
            var minute = ret.minute;
            userInfo['bitth_minute'] = minute;
            if (minute<10) {
              minute = "0" + minute;
            }

            let data1=year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + "00";
            userInfo['birthday']=new Date(Date.parse(data1.replace(/-/g, "/"))).getTime()/1000;

            $api.text(birthEl, year + "年" + month + "月" + day + "日 " + hour + ":" + minute);

            $api.css(birthEl,'color: #26344C;');
          }
        } else {
          // alert(JSON.stringify(err));
        }
      });
    }
  }

  function getFortuneTelling() {
    if (familyNameEl.value.length == 0) {
      api.toast({
        msg: "请输入姓氏",
        duration: 2000,
        location: 'middle'
      });
      return;
    }
    if (userInfo['sex'] == undefined) {
      api.toast({
        msg: "请输选择性别",
        duration: 2000,
        location: 'middle'
      });
      return;
    }
    if (userInfo['num'] == undefined) {
      api.toast({
        msg: "请输选择字数",
        duration: 2000,
        location: 'middle'
      });
      return;
    }
    // if (userInfo['birthday'] == undefined) {
    //   api.toast({
    //     msg: "请输选择出生时间",
    //     duration: 2000,
    //     location: 'middle'
    //   });
    //   return;
    // }

    api.openWin({
      name: 'babyNameWin',
      url: './tool/babyNameWin.html',
      slidBackType: 'edge',
      pageParam: {
        family_name: familyNameEl.value,
        sex: userInfo['sex'],
        num: userInfo['num'],
        // birth_year: parseInt(userInfo['birth_year']),
        // birth_month: parseInt(userInfo['birth_month']),
        // birth_day: parseInt(userInfo['birth_day']),
        // birth_hour: parseInt(userInfo['birth_hour']),
        // birth_minute: parseInt(userInfo['bitth_minute']),
      },
      animation: {
        type:"movein",
        subType:"from_right",
        duration:300
      }
    });

  }
</script>
